<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>首页</title>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<style>
			body,ul,p{padding:0;margin:0;}
			.clearfix{zoom:1;}
			.clearfix:after{display:block; content:'.'; clear:both; line-height:0; visibility:hidden;}
			a,input{outline:none;}
			ul,li{list-style:none;}
			.container{width:94%;margin:0 auto;padding:0 3%;}
			.bannerHolder li {float:left;margin:3% 0% 0 0%;display:inline}
			.banner {position: relative;overflow: hidden; float: left;display: inline;}
			.banner > .banner{width:auto;}
			.banner img { display: block; border: none;max-width:100%;height:auto;}
			.banner .cornerTL { left:-63px; top:-63px; }
			.banner .cornerTR { right:-63px; top:-63px; }
			.banner .cornerBL { left:-63px; bottom:-63px; }
			.banner .cornerBR { right:-63px; bottom:-63px; }
			.banner p { width: 100%;left: 0; top:42%; z-index: 200; position: absolute; font-family: Tahoma, Arial, Helvetica, sans-serif; color: #FFF; font-size: 11px; text-align: center; cursor: pointer; display: none;}
			.banner .companyInfo a,.banner .companyInfo a:hover{color:#fff;font-size:1.8em;font-family:"微软雅黑";text-decoration:none;}
		</style>			
	</head>
	<body>
		<div class="container">
			<div class="wrapper">
				<ul id="bannerHolder" class="clearfix bannerHolder">
					<li>
						<div class="banner"> <a href="index4.html?0" target="_blank"> <img src="images/1.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?0" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?8" target="_blank"> <img src="images/2.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?8" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?2" target="_blank"> <img src="images/3.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?2" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?3" target="_blank"> <img src="images/4.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?3" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?5" target="_blank"> <img src="images/5.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?5" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?10" target="_blank"> <img src="images/6.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?10" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?7" target="_blank"> <img src="images/7.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?7" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?12" target="_blank"> <img src="images/8.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?12" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?13" target="_blank"> <img src="images/9.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?13" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?14" target="_blank"> <img src="images/10.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?14" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?15" target="_blank"> <img src="images/11.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?15" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?16" target="_blank"> <img src="images/12.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?16" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?17" target="_blank"> <img src="images/13.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?17" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?18" target="_blank"> <img src="images/14.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?18" target="_blank">了解详情</a></p>
						</div>
					</li>
					<li>
						<div class="banner"> <a href="index4.html?19" target="_blank"> <img src="images/15.png" alt="image1"/> </a>
							<p class="companyInfo"><a href="index4.html?19" target="_blank">了解详情</a></p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript">
			document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. 
			setting();
			subSomething();
			$(window).resize(function(){
				setting();
				subSomething();
			});
			function subSomething() 
			{ 
				if(document.readyState == "complete"){
					$(".load").hide();
				}else{
					$(".load").show();
				}
				
			} 
			function setting(){
				var W=document.documentElement.clientWidth || document.body.clientWidth,
					H=document.documentElement.clientHeight || document.body.clientHeight;
					$(".load").css({"width":W+"px","height":H+"px"});
			}
			$(function(){
				$('.banner div').css('opacity',0.4);
				$('.banner').hover(function(){		
					var el = $(this);
					el.find('div').stop().animate({width:200,height:200},'slow',function(){
						el.find('p').fadeIn('fast');
					});
				},function(){
					var el = $(this);
					el.find('p').stop(true,true).hide();
					el.find('div').stop().animate({width:60,height:60},'fast');
				}).click(function(){
					window.open($(this).find('a').attr('href'));
				});
			})
		</script>

	</body>
</html>	